<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie==edge">
    <title>我的</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.css">
    <script src="js/search.js"></script>


</head>
<body>


<!--导航栏模块-->
<nav>
<span class="menu">

</span>
    <div class="dao">
        <input type="text" placeholder="雅俗共赏">
    </div>
    <div class="search"></div>
</nav>

<!--我的-->
<div class="content">
    <hr>
<!--音乐    -->
<div class="music">
    <div class="box">
        <span class="num">
            <p>1</p>
        </span>
        <div class="music-info">
            <p class="music-name">雅俗共赏</p>
            <p>--许嵩</p>
        </div>
        <div class="music-play">
            <div class="music-bo">
            <i class="fa fa-caret-square-o-right"></i>
            </div>
            <div class="music-bo">
            <i class="fa fa-align-left"></i>
            </div>
        </div>
    </div>
    <div class="box">
        <span class="num">
            <p>2</p>
        </span>
        <div class="music-info">
            <p class="music-name">雅俗共赏(女生版)</p>
            <p>--Seiwen</p>
        </div>
        <div class="music-play">
            <div class="music-bo">
                <i class="fa fa-caret-square-o-right"></i>
            </div>
            <div class="music-bo">
                <i class="fa fa-align-left"></i>
            </div>
        </div>
    </div>
    <div class="box">
        <span class="num">
            <p>3</p>
        </span>
        <div class="music-info">
            <p class="music-name">偏爱</p>
            <p>--张芸京</p>
        </div>
        <div class="music-play">
            <div class="music-bo">
                <i class="fa fa-caret-square-o-right"></i>
            </div>
            <div class="music-bo">
                <i class="fa fa-align-left"></i>
            </div>
        </div>
    </div>
    <div class="box">
        <span class="num">
            <p>4</p>
        </span>
        <div class="music-info">
            <p class="music-name">所望皆星河</p>
            <p>--房东的猫</p>
        </div>
        <div class="music-play">
            <div class="music-bo">
                <i class="fa fa-caret-square-o-right"></i>
            </div>
            <div class="music-bo">
                <i class="fa fa-align-left"></i>
            </div>
        </div>
    </div>
</div>
<!--视频-->
 <div class="video">
        <div class="MV">
            <div class="box">
                <div class="box-left">
                    <div class="story-img">
                        <img src="images/search-mv-1.png" alt="">
                    </div>
                </div>
                <div class="box-right">
                    <div class="top">
                        <p>音乐才子许嵩之经典歌曲</p>
                    </div>
                    <div class="bottom">
                        <div class="count">
                            <p>58首</p>
                        </div>
                        <div class="author">
                            <p>by汝之恋</p>
                        </div>
                        <div class="bo-count">
                            <p>播放636万次</p>
                        </div>
                    </div>

                </div>
            </div>
            <div class="box">
                <div class="box-left">
                    <div class="story-img">
                        <img src="images/search-mv-2.png" alt="">
                    </div>
                </div>
                <div class="box-right">
                    <div class="top">
                        <p>回忆杀|徐亮 许嵩 本兮</p>
                    </div>
                    <div class="bottom">
                        <div class="count">
                            <p>69首</p>
                        </div>
                        <div class="author">
                            <p>by不如喜欢我</p>
                        </div>
                        <div class="bo-count">
                            <p>播放636万次</p>
                        </div>
                    </div>

                </div>
            </div>
            <div class="box">
                <div class="box-left">
                    <div class="story-img">
                        <img src="images/search-mv-3.png" alt="">
                    </div>
                </div>
                <div class="box-right">
                    <div class="top">
                        <p>N年许嵩，雅俗共赏</p>
                    </div>
                    <div class="bottom">
                        <div class="count">
                            <p>87首</p>
                        </div>
                        <div class="author">
                            <p>by青年晚报员</p>
                        </div>
                        <div class="bo-count">
                            <p>播放636万次</p>
                        </div>
                    </div>

                </div>
            </div>


        </div>

    </div>

<!--故事-->
<div class="story">
    <div class="story-bd">
        <div class="box">
            <div class="box-left">
                <div class="story-img">
                    <img src="images/story-img-1.png" alt="">
                </div>
            </div>
            <div class="box-right">
                <div class="top">
                    <p>李宗盛：做琴的刀，写歌的笔</p>
                </div>
                <div class="bottom">
                    <div class="story-user">
                        <span>
                            <img src="images/story-img-img-1.png" alt="">
                        </span>
                        <p>解忧小食堂</p>
                    </div>
                    <div class="story-reader-count">
                        <span>
                            <img src="images/i-read.png" alt="">
                        </span>

                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box-left">
                <div class="story-img">
                    <img src="images/story-img-2.png" alt="">
                </div>
            </div>
            <div class="box-right">
                <div class="top">
                    <p>情不知所以，一往而情深；朝思暮想，幻想一生有你《明天过后》</p>
                </div>
                <div class="bottom">
                    <div class="story-user">
                        <span>
                            <img src="images/story-img-img-2.png" alt="">
                        </span>
                        <p>牧云</p>
                    </div>
                    <div class="story-reader-count">
                        <span>
                             <img src="images/i-read.png" alt="">

                        </span>

                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <div class="box-left">
                <div class="story-img">
                    <img src="images/story-img-3.png" alt="">
                </div>
            </div>
            <div class="box-right">
                <div class="top">
                    <p>对你的心意，就像在薄薄的被子里玩手机，总有星光露出来</p>
                </div>
                <div class="bottom">
                    <div class="story-user">
                        <span>
                            <img src="images/story-img-img-3.png" alt="">
                        </span>
                        <p>想做梦的梦</p>
                    </div>
                    <div class="story-reader-count">
                        <span>
                             <img src="images/i-read.png" alt="">

                        </span>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</div>

<!--底部模块-->
<div class="play">
    <!--做出三角的缺口-->
    <div class="trangle">
    </div>
    <!--    播放按钮-->
    <div class="bofang">
        <span class="btu"> <img src="images/bofang.png" alt=""></span>

        <span class="info">
            <p class="name">清明雨上</p>
            <p class="author">--许嵩</p>
        </span>
    </div>
    <div class="player">
        <div class="btu1">
            <span>
                <div class="box">
                     <img src="images/prev.png" alt="">
                </div>

            </span>
            <span>  <div class="box">
                     <img src="images/next.png" alt="">
                </div></span>
        </div>
        <div class="btu2">
            <div class="menu">
                <img src="images/menuwhite.png" alt="">
            </div>

        </div>
        <div class="btu3">
            <div class="bofangtiao">

            </div>
        </div>
    </div>
</div>
</body>
</html>